<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>酒店 | 酒店筛选</title>
        <link rel="stylesheet" type="text/css" href="css/init.css"/>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/screen.css">
        <script src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=L9oPs4gvznuUPqo8q5czSmhXtMHrVG37"></script>
        <!-- 日历插件 -->
        <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />
        <script type="text/javascript" src="js/moment.js"></script>
        <script type="text/javascript" src="js/daterangepicker.js"></script>
        <!-- 分页 -->
        <link rel="stylesheet" type="text/css" href="css/pagination.css" media="screen">
        <script src="js/screen_paqination.js"></script>
	</head>
	<body>
		<header>
			<div class="header-title clearfix">
				<div class="lf">
					<a href="homepage.html">
						<img src="img/logo_white.png" alt="" class="logo">
						酒店项目
					</a>
				</div>
				<div class="information gt">
                    <div class="not_login">
                        <a href="register.html" class="turnRegister">
                            登录
                        </a>
                        <a href="login.html" class="turnLogin">
                            注册
                        </a>
                    </div>
                    <div class="user" style="display:none">
                        <a href="" name="a1" style="display:inline-block">
                            <img src="img/4.jpg" class="userHead">
                        </a>
                        <span class="userName"></span>
                        <i class="arrow"></i>						
                        <div class="user-list">
                            <div class="triangle"></div>
                            <ul>
                                <li>
                                    <a id="personal-main" href="userSetting.html"><img src="img/icon_my.png">个人中心</a>
                                </li>
                                <li>
                                    <a href="userSetting.html"><img src="img/icon_setting.png">账户设置</a>
                                </li>
                                <li>
                                    <!-- <a href="login.html#login"> -->
                                    <a class="logout" href="login.html"><img src="img/icon_out.png">退出登录</a>
                                </li>
                            </ul>
                        </div>
                        <a href="payList.html" class="turnMyoder">
                            我的订单
                        </a>
                    </div>
                </div>
			</div>
        </header>
        <div class="nav clearfix">
            <div class="selectCity lf">
                <input type="text" placeholder="请选择城市" id="selectCity">
                <div class="city">
                    <div class="classify">
                        <ul class="clearfix"></ul>
                    </div>
                    <div class="choseCity">
                        <ul class="clearfix"></ul>
                    </div>
                </div>
            </div>
            <div class="calendar lf">
                <!-- <input type="text" placeholder="请选择日期" class="rili"> -->
                <button type="button" class="rili " id="daterange-btn">
                        <span> 请选择日期 </span>
                        <i class="icon iconfont"></i>
                </button>
                <script type="text/javascript">
                    $('.ranges_1 ul').remove();
                    $('#daterange-btn').daterangepicker({
                            ranges: {
                                '全部': [moment(), moment().subtract(-1, 'days')],
                                '今天': [moment(), moment()],
                                '明天': [moment().subtract(-1, 'days'), moment().subtract(-1, 'days')],
                                '未来七天': [moment(), moment().subtract(-6, 'days')],
                                '未来30天': [moment(), moment().subtract(-29, 'days')],
                                '未来60天': [moment(), moment().subtract(-59, 'days'), ]
                            },
                            startDate: moment(),
                            endDate: moment()
                        },
                        function(start, end, label) {
                            //label:通过它来知道用户选择的是什么，传给后台进行相应的展示
                            //      console.log(label)
                            if (label == '全部') {
                                $('#daterange-btn span').html('全部');
                            } else if (label == '今天') {
                                $('#daterange-btn span').html(end.format('YYYY/MM/DD'));
                            } else if (label == '明天') {
                                $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
                            } else if (label == '未来七天') {
                                $('#daterange-btn span').html(start.format('YYYY/MM/DD') + '-' + end.format('YYYY/MM/DD'));
                            } else if (label == '未来30天') {
                                $('#daterange-btn span').html(start.format('YYYY/MM/DD') + '-' + end.format('YYYY/MM/DD'));
                            } else if (label == '未来60天') {
                                $('#daterange-btn span').html(start.format('YYYY/MM/DD') + '-' + end.format('YYYY/MM/DD'));
                            }
                        }
                    );
                </script>
            </div>
            <div class="search lf">
                <input type="text" placeholder="酒店名称/位置/关键字" id="search">
            </div>
            <div class="search_Btn lf">
                <img src="img/search.png" alt="">
                搜索
            </div>
        </div>
        <div class="nav2">
            <div class="nav2-screen clearfix">
                <span class="border-top nav2-left">位置</span>
                <div class="position">
                    <span class="unlimited">
                        不限
                    </span>
                    <span class="area">
                        行政区<i></i>
                        <div class="hotel_area"></div>
                        <div class="notFound_position">
                            未找到该城市
                        </div>
                    </span>
                    <span class="trad">
                        商圈<i></i>
                        <div class="hotel_trad"></div>
                        <div class="notFound_position">
                            未找到该城市
                        </div>
                    </span>
                    <span class="subway">
                        地铁站<i></i>
                        <div class="hotel_subway">
                            <ul class="clearfix Metro_Line"></ul>
                            <ul class="clearfix one_line"></ul>
                        </div>
                    </span>
                    <span class="station">
                        车站<i></i>
                        <div class="hotel_station">
                            <ul class="clearfix train"></ul>
                            <ul class="clearfix bus"></ul>
                            <ul class="clearfix airplane"></ul>
                        </div>
                    </span>
                    <span class="spot">
                        景点列表<i></i>
                        <div class="hotel_spot"></div>
                        <div class="notFound_position">
                            未找到该城市
                        </div>
                    </span>
                </div>
            </div>
            <div class="nav2-screen clearfix">
                <span class="nav2-left">价格</span>
                <div class="price">
                    <span class="unlimited">
                        不限
                    </span>
                    <span data-price="0,100">
                        <b></b>100元以下
                    </span>
                    <span data-price="100,300">
                        <b></b>100-300元
                    </span>
                    <span data-price="300,600">
                        <b></b>300-600元
                    </span>
                    <span data-price="600,1000">
                        <b></b>600-1000元
                    </span>
                    <div class="user-defined">
                        自定义　<input type="text" class="lower_limit"> — <input type="text" class="Upper_limit">
                        <button type="button" class="submitPrice">确定</button>
                    </div>
                </div>
            </div>
            <div class="nav2-screen clearfix">
                <span class="nav2-left">星级</span>
                <div class="star">
                    <span class="unlimited">
                        不限
                    </span>
                    <span data-star="5" class="starLevel">
                        <b></b>五星/豪华
                    </span>
                    <span data-star="4" class="starLevel">
                        <b></b>四星/高档
                    </span>
                    <span data-star="3" class="starLevel">
                        <b></b>三星/舒适
                    </span>
                    <span data-star="2" class="starLevel">
                        <b></b>二星及以下
                    </span>
                    <span data-star="经济连锁" class="specialLevel">
                        <b></b>经济连锁
                    </span>
                    <span data-star="客栈公寓" class="specialLevel">
                        <b></b>客栈公寓
                    </span>
                </div>
            </div>
            <div class="nav2-screen clearfix">
                <span class="border-bottom nav2-left">品牌</span>
                <div class="brand">
                    <span class="unlimited">
                        不限
                    </span>
                    <span data-brand="如家快捷">
                        <b></b>如家快捷
                    </span>
                    <span data-brand="汉庭酒店">
                        <b></b>汉庭酒店
                    </span>
                    <span data-brand="七天连锁">
                        <b></b>七天连锁
                    </span>
                    <span data-brand="锦江之星">
                        <b></b>锦江之星
                    </span>
                    <span data-brand="布丁">
                        <b></b>布丁
                    </span>
                    <span data-brand="速8">
                        <b></b>速8
                    </span>
                    <div class="moreBrand">
                        更多<i></i>
                    </div>
                </div>
            </div>
            <div class="ErrorMsg"></div>
        </div>
        <div class="screen">
            <div class="screen-title">
                <b>推荐</b>
                <span class="overallRating">评价<i></i></span>
                <span class="priceRank">价格<i></i></span>
                <span class="distance">距离<i></i></span>
            </div>
            <div class="screen-main clearfix">
                <ul class="hotel-msg lf">
                   
                </ul>
                <div id="container" class="gt">

                </div>
            </div>
        </div>
        <div class="box m-style M-box3"></div>
        <script>
            $('.box').pagination();
        </script>
        <footer>
            Copyright © 2017 apis.sh All Rights Reserved | 陕ICP备15013925号-3
        </footer>       
    </body>	
    <script src="js/common.js"></script>
<script src="js/common-homepage.js"></script>
    <script src="js/screen.js"></script>
</html>
    